<template>
  <el-dialog title="可售数量调0配置" width="720" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <el-form ref="formRef" :model="formInline">
      <el-form-item label="店铺" :prop="shop_ids" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
        <div class="flex w-[100%]">
          <el-select v-model="formInline.shop_ids" placeholder="编辑类型" multiple collapse-tags-tooltip collapse-tags clearable class="mr-[8px]" style="width: 400px">
            <el-option v-for="item in originOption.temuShopOpt" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button type="primary" @click="formInline.shop_ids = props.originOption.temuShopOpt.map((v) => v.value)"> 全选 </el-button>
          <el-button type="primary" @click="formInline.shop_ids = []"> 清空 </el-button>
        </div>
        <div class="shop-view">
          <template v-for="item in originOption.temuShopOpt" :key="item.value">
            <p v-if="formInline.shop_ids.includes(item.value)" class="flex items-center">
              {{ item.label }}
              <span class="dk-iconfont icon-CircleClose ml-[6px] cursor-pointer" @click="delItem(item.value)"></span>
            </p>
          </template>
        </div>
      </el-form-item>
      <div>
        说明：系统每半个小时检测<span class="text-red">已勾选店铺</span
        >“在售”状态的SKU的海外仓库存数量，当SKU所有海外仓库存小于等于1时，系统自动将对应SKU的连接可售数量修改为0，并同步更新到TEMU半托后台
      </div>
    </el-form>
    <template #footer>
      <el-button @click="handleClose"> 取消 </el-button>
      <el-button type="primary" @click="save"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import { detectionConfig, detectionConfigList } from "../api.js"
const emit = defineEmits(["refresh"])
const props = defineProps({
  originOption: {
    type: Object,
    default: () => {},
  },
})
const modelValue = ref(false)
const delItem = (val) => {
  formInline.value.shop_ids = formInline.value.shop_ids.filter((v) => v != val)
}
const formInline = ref({ shop_ids: [] })

onMounted(async () => {})

const handleClose = () => {
  modelValue.value = false
  formInline.value.shop_ids = []
}
const save = () => {
  detectionConfig({ shop_ids: formInline.value.shop_ids }).then((res) => {
    console.log(123)

    handleClose()
    ElMessage.success("保存成功")
    emit("refresh")
  })
}
const open = (row) => {
  modelValue.value = true
  detectionConfigList().then((res) => {
    formInline.value.shop_ids = res.data
  })
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.shop-view {
  border: 1px solid #e6e7e9;
  border-radius: 4px;
  width: 400px;
  height: 160px;
  margin-top: 8px;
  padding: 0 4px;
  overflow-y: auto;
}
</style>
